<template>
    <el-container>
        <el-aside class="leftBox">
            <div class="perInfo">
                <h3>个人信息</h3>
                <img :src="userInfo.photo | pictureUrl" class="user">
                <div class="userInfo">
                    <label>{{userInfo.username || userInfo.userName || user.userName}}</label>
                    <span>{{userInfo.schoolName}}</span>
                </div>
                <div class="seeInfo">资源信息</div>
            </div>
            <div class="infoList">
                <el-row>
                    <el-col :span="8">
                        <label>{{extStatisticP.articleCount > 0 ? extStatisticP.articleCount : 0 }}</label>
                        <p>文章</p>
                    </el-col>
                    <el-col :span="8">
                        <label>{{ extStatisticP.albumCount > 0 ? extStatisticP.albumCount : 0 }}</label>
                        <p>相册</p>
                    </el-col>
                    <el-col :span="8">
                        <label>{{ total > 0 ? total : 0 }}</label>
                        <p>帖子</p>
                    </el-col>
                </el-row>
            </div>
            <div class="myArticle">
                <h3>我的文章</h3>
                <div class="artList" v-for="(item, index) in articlesNewest" :key="index">
                    <h4>
                        {{item.title}}
                    </h4>
                    <p v-html="item.content" class="ellipsis"></p>
                    <div class="artTime">
                        发表于--{{item.creationtime}} 
                    </div>
                    <div class="artMes">
                        <label>阅读<span>({{item.readnum}})</span></label>
                        <label>评论<span>({{item.commentnum}})</span></label>
                    </div>
                </div>
            </div>
            <div class="visitor">
                <h3>最近访客</h3>
                <ul class="visitor_list">
                    <li v-for="(item, index) in visitorList" :key="index">
                        <el-avatar :size="50" :src="item.photo | pictureUrl" @error="errorHandler">
                            <img src="../../../assets/img/headportrait01.jpg" />
                        </el-avatar>
                        <p>{{item.username}}</p>
                    </li>
                </ul>
            </div>
        </el-aside>
        <el-container>
            <HomePageMain :userInfoN = 'userInfo'></HomePageMain>
        </el-container>
    </el-container>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import HomePageMain from "@c/homePageMain/homePageMain.vue"
    export default {
        name: "sudentsHomePage",
        computed: {
            ...mapState({
                user: state => state.userModule.user,
                userInfo: state => state.userModule.userInfo
            })
        },
        created(){
            this.articleGetSetting()
            this.getVisitorList()
        },
        beforeMount(){
            this.extStatistic()
            this.articleList()
            this.getInvitationList()
        },
        data(){
            return {
                total:0,
                extStatisticP:{},
                zoneConfig:{}, // 空间显示规则
                articlesNewest:{}, //最新的文章列表
                visitorList:[]
            }
        },
        components: {
            HomePageMain
        },
        methods: {
            getInvitationList() {
                this.$store
                    .dispatch("invitationModule/getInvitationList", {
                        search: '',
                        ascType: 0,
                        datetime: null,
                        page: 1,
                        pageSize: 2,
                        userId: this.userInfo.id
                    })
                    .then(res => {
                        if (res.data.code === 200) {
                            this.total = res.data.result.total;
                        }
                    })
            },
            // 获取资源信息
            extStatistic(params){
                this.$store
                    .dispatch("homeModule/extStatistic", {
                        hisUserId: this.userInfo.id
                    })
                    .then(res => {
                        this.extStatisticP = res
                    });
            },
            // 获取草稿/文章列表
            articleList(param) {
                this.$store
                    .dispatch("articleModule/articleList", {
                        limit: this.zoneConfig.homeviewcount?this.zoneConfig.homeviewcount:5,
                        draft: param ? 0 : 1,
                        userid: this.userInfo.id
                    })
                    .then(res => {
                        if (res.data.code == 200) {
                            this.articlesNewest = res.data.result.list
                        }
                    });
            },
            // 获取文章显示配置文件
            articleGetSetting(){
                this.$store
                    .dispatch("articleModule/articleGetSetting", {
                        userid: this.userInfo.id,
                    })
                    .then(res => {
                        if(res.data.code == 200){
                            this.zoneConfig = res.data.result
                            this.articleList()
                        }
                    });
            },
            // 最新访客列表
            getVisitorList(){
                this.$store
                    .dispatch("visitorAllModule/getVisitorList", {
                        page: 1,
                        limit: 50
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.visitorList = res.data.result.list
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: "warning"
                            });
                        }
                    })
            },
            errorHandler() {
                return true
            }
        }
    }
</script>

<style lang="scss" scoped>
    .ellipsis{
        text-indent: 24px;
        text-align: justify;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .infoList {
        margin-top: 15px;
        font-size: 14px;

        p {
            margin: 0;
        }
    }

    .myArticle {
        overflow: hidden;

        h3 {
            font-size: 14px;
            text-align: left;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
        }

        .artList {
            overflow: hidden;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
            margin-top: 10px;

            h4 {
                text-align: left;
                margin: 0;
                font-size: 14px;
            }

            p {
                margin: 0;
                text-align: left;
                font-size: 12px;
                margin-top: 10px;
                line-height: 20px;
                padding: 0px;
            }
        }

        .artTime {
            font-size: 12px;
            text-align: left;
            padding: 5px
        }

        .artMes {
            overflow: hidden;
            text-align: left;
            padding: 5px;
            font-size: 12px;

            label {
                color: #409EFF;
                margin-right: 20px;

                span {
                    color: #333;
                }
            }
        }
    }

    .visitor {
        h3 {
            font-size: 14px;
            text-align: left;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
        }

        .visitor_list {
            list-style-type: none;
            box-sizing: border-box;
            padding: 5px;

            li {
                float: left;
                margin-right: 5px;
                margin-bottom: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                p {
                    width: 60px;
                    color: #606266;
                    font-size: 14px;
                    margin-block-start: 2px;
                    margin-block-end: 2px;
                }
            }
        }

        .visitor_list::after {
            content: "";
            display: block;
            width: 100%;
            font-size: 0;
            clear: both;
        }
    }

    .leftBox {
        background: #fff;
        padding: 5px;
        width: 240px;

        .perInfo {
            h3 {
                font-size: 14px;
                text-align: left;
                border-bottom: 1px solid #ccc;
                padding-bottom: 5px;
            }

            .user {
                width: 90%;
                height: 200px;
                margin: auto;
            }

            .userInfo {
                overflow: hidden;
                width: 90%;
                margin: auto;
                margin-top: 10px;

                label {
                    font-size: 14px;
                    float: left;
                }

                span {
                    float: right;
                    color: #ababab;
                }
            }

            .seeInfo {
                font-size: 14px;
                text-align: left;
                width: 90%;
                margin: auto;
                border-bottom: 1px solid #ccc;
                padding-bottom: 5px;
                margin-top: 15px;
            }
        }
    }
</style>